<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>远程文件编辑器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .status {
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
            text-align: center;
            font-weight: bold;
        }
        
        .status.connected {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status.disconnected {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .status.saving {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
        }
        
        #fileContent {
            width: 100%;
            height: 400px;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
            resize: vertical;
        }
        
        #fileContent:focus {
            border-color: #007bff;
            outline: none;
        }
        
        .button-group {
            margin-top: 20px;
            text-align: center;
        }
        
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 12px 24px;
            margin: 0 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s;
        }
        
        button:hover:not(:disabled) {
            background-color: #0056b3;
        }
        
        button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        
        .info {
            margin-top: 20px;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 4px;
            font-size: 14px;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>远程文件编辑器</h1>
        
        <div id="status" class="status disconnected">未连接</div>
        
        <textarea id="fileContent" placeholder="连接服务器后，文件内容将在此显示..."></textarea>
        
        <div class="button-group">
            <button id="connectBtn" onclick="connect()">连接服务器</button>
            <button id="saveBtn" onclick="saveFile()" disabled>保存文件</button>
            <button id="refreshBtn" onclick="refresh()" disabled>刷新内容</button>
        </div>
        
        <div class="info">
            <strong>使用说明：</strong><br>
            1. 点击"连接服务器"建立WebSocket连接<br>
            2. 服务器会自动加载远程文件内容<br>
            3. 在文本框中编辑内容<br>
            4. 点击"保存文件"将修改写回远程服务器
        </div>
    </div>

    <script>
        let websocket = null;
        const statusDiv = document.getElementById('status');
        const fileContent = document.getElementById('fileContent');
        const connectBtn = document.getElementById('connectBtn');
        const saveBtn = document.getElementById('saveBtn');
        const refreshBtn = document.getElementById('refreshBtn');

        function updateStatus(message, className) {
            statusDiv.textContent = message;
            statusDiv.className = `status ${className}`;
        }

        function connect() {
            if (websocket) {
                websocket.close();
            }

            updateStatus('连接中...', 'saving');
            connectBtn.disabled = true;

            try {
                websocket = new WebSocket('ws://localhost:8888');

                websocket.onopen = function(event) {
                    updateStatus('已连接到服务器', 'connected');
                    saveBtn.disabled = false;
                    refreshBtn.disabled = false;
                    connectBtn.textContent = '断开连接';
                    connectBtn.disabled = false;
                    connectBtn.onclick = disconnect;
                };

                websocket.onmessage = function(event) {
                    const data = JSON.parse(event.data);
                    
                    if (data.type === 'file_content') {
                        fileContent.value = data.content;
                        updateStatus('文件内容已加载', 'connected');
                    } else if (data.type === 'save_result') {
                        if (data.success) {
                            updateStatus('文件保存成功', 'connected');
                        } else {
                            updateStatus('文件保存失败: ' + data.message, 'disconnected');
                        }
                        saveBtn.disabled = false;
                        saveBtn.textContent = '保存文件';
                    }
                };

                websocket.onclose = function(event) {
                    updateStatus('连接已断开', 'disconnected');
                    saveBtn.disabled = true;
                    refreshBtn.disabled = true;
                    connectBtn.textContent = '连接服务器';
                    connectBtn.disabled = false;
                    connectBtn.onclick = connect;
                };

                websocket.onerror = function(error) {
                    updateStatus('连接错误', 'disconnected');
                    connectBtn.disabled = false;
                    console.error('WebSocket错误:', error);
                };

            } catch (error) {
                updateStatus('连接失败', 'disconnected');
                connectBtn.disabled = false;
                console.error('连接错误:', error);
            }
        }

        function disconnect() {
            if (websocket) {
                websocket.close();
            }
        }

        function saveFile() {
            if (!websocket || websocket.readyState !== WebSocket.OPEN) {
                alert('请先连接到服务器');
                return;
            }

            updateStatus('正在保存...', 'saving');
            saveBtn.disabled = true;
            saveBtn.textContent = '保存中...';

            websocket.send(JSON.stringify({
                type: 'save_content',
                content: fileContent.value
            }));
        }

        function refresh() {
            if (!websocket || websocket.readyState !== WebSocket.OPEN) {
                alert('请先连接到服务器');
                return;
            }
            
            // 重新连接以获取最新内容
            connect();
        }

        // 页面加载完成后自动连接
        window.onload = function() {
            // connect(); // 取消自动连接，改为手动连接
        };

        // 页面关闭时断开连接
        window.onbeforeunload = function() {
            if (websocket) {
                websocket.close();
            }
        };
    </script>
</body>
</html>